<template>
  <div>
    <el-row>
      <el-col :span="14">
        <el-card>
          <div slot="header" class="clearfix">
            <div class="edp-home-card-header-title">
              <span>{{dataForm.apiName}}--({{dataForm.apiCode}})</span>
            </div>
            <div class="edp-home-card-header-right">
            </div>
          </div>
          <div class="api-body">
            <el-form v-loading="loading" :model="dataForm" :label-width="'100px'">
              <el-row style="margin-top: 10px;">
                <el-col :span="8">
                  <!-- 接口编码 -->
                  <el-form-item label="接口编码">
                    {{dataForm.apiCode}}
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <!-- 接口名称 -->
                  <el-form-item label="接口名称"
                                prop="apiName">
                    <!--文本框-->
                    {{dataForm.apiName}}
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <!-- 接口处理方式 -->
                  <el-form-item label="异常通知"
                                prop="msgPush">
                    <el-checkbox v-model="dataForm.msgPush"></el-checkbox>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <!-- 接口数据提供者 -->
                  <el-form-item label="数据提供者"
                                prop="apiProvider">
                    {{getAppName(dataForm.apiProvider)}}
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <!-- 接口数据使用者 -->
                  <el-form-item label="数据使用者"
                                prop="apiConsumer">
                    {{getAppName(dataForm.apiConsumer)}}
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <!-- 接口调用方式 -->
                  <el-form-item label="调用方式"
                                prop="apiRequestType">
                    {{$getDictLabel('API_REQUEST_TYPE', dataForm.apiRequestType)}}
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <!-- 接口类型 -->
                  <el-form-item label="接口类型"
                                prop="apiType">
                    {{$getDictLabel('API_TYPE', dataForm.apiType)}}
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <!-- 接口通信协议 -->
                  <el-form-item label="通信协议"
                                prop="apiProtocolType">
                    {{$getDictLabel('API_PROTOCOL_TYPE', dataForm.apiProtocolType)}}
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <!-- 接口处理方式 -->
                  <el-form-item label="处理方式"
                                prop="apiDealType">
                    {{$getDictLabel('API_DEAL_TYPE', dataForm.apiDealType)}}
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <!-- 接口访问扩展参数json -->
                  <el-form-item label="接口描述" prop="apiRemark">
                    {{dataForm.apiRemark}}
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
          <div id="c1"></div>
        </el-card>
      </el-col>
      <el-col :span="10" style="padding-left: 10px;">
        <el-card>
          <div slot="header" class="clearfix">
            <div class="edp-home-card-header-title">
              <span>最近10次请求日志</span>
            </div>
            <div class="edp-home-card-header-right">
            </div>
          </div>
          <vxe-table ref="xTable"
                     max-height="auto"
                     auto-resize
                     class="vxe-table-element"
                     :data="apiLogList">
            <vxe-table-column type="index" align="center" width="60"></vxe-table-column>
            <vxe-table-column field="apiReqTime" title="请求时间" width="160">
            </vxe-table-column>
            <vxe-table-column field="apiStatus" title="状态" width="80">
              <template slot-scope="scope">
                <el-tag v-if="!scope.row.apiStatus" size="small" type="danger">失败</el-tag>
                <el-tag v-else size="small" type="success">成功</el-tag>
              </template>
            </vxe-table-column>
            <vxe-table-column field="respStr" title="响应描述">
            </vxe-table-column>
          </vxe-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import mainContent from '@/views/main-content'
import { Line } from '@antv/g2plot'
var content = mainContent
export default {
  name: 'apiConfView',
  data () {
    return {
      timestamp: this.$route.params.timestamp,
      loading: false,
      requestFlag: '1',
      dataForm: {
        id: this.$route.params.id,
        apiCode: '',
        apiName: '',
        apiProvider: '',
        apiConsumer: '',
        apiRequestType: '',
        apiType: '',
        apiProtocolType: '',
        apiDealType: '',
        receiptStepClass: '',
        receiptStepMethod: '',
        queryStepClass: '',
        queryStepMethod: '',
        responseStepClass: '',
        responseStepMethod: '',
        updateStepClass: '',
        updateStepMethod: '',
        apiUrl: '',
        apiAccessKey: '',
        apiSecretKey: '',
        extendJson: '',
        apiRemark: ''
      },
      appList: [],
      apiLogList: [],
      linePlot: {}
    }
  },
  created () {
    // 通过路由参数pid, 控制列表请求操作
    this.$nextTick(() => {
      if (this.$route.params.id) {
        this.dataForm.id = this.$route.params.id
        this.loading = true
        Promise.all([
          this.getAppInfo(),
          this.getInfo()
        ]).then(() => {
        })
      }
      this.createChart()
    })
  },
  activated () {
    this.getChartData(this.dataForm.apiCode)
    this.getApiLog(this.dataForm.apiCode)
  },
  methods: {
    // 获取信息
    getInfo () {
      this.$http.get(`/api/apiConf/${this.dataForm.id}`).then(({ data: res }) => {
        this.loading = false
        if (res.code !== 0) {
          return false
        }
        this.dataForm = {
          ...this.dataForm,
          ...res.data
        }
        this.getChartData(this.dataForm.apiCode)
        this.getApiLog(this.dataForm.apiCode)
        this.requestFlagChange()
      }).catch(() => {})
    },
    getAppInfo () {
      this.$http.get(`/sys/sysApp/listAll`).then(({ data: res }) => {
        if (res.code !== 0) {
          return false
        }
        this.appList = res.data
      }).catch(() => {})
    },
    getApiLog (apiCode) {
      this.$http.get(`/api/apiMonitor/getApiLogListTopTen?apiCode=${apiCode}`).then(({ data: res }) => {
        this.apiLogList = []
        if (res.code !== 0) {
          this.apiLogList = []
          return false
        }
        this.apiLogList = res.data
      })
    },
    getAppName (appId) {
      let appName = ''
      this.appList.forEach(app => {
        if (app.appId === appId) {
          appName = app.appName
          return appName
        }
      })
      return appName
    },
    requestFlagChange () {
      if (this.dataForm.apiProvider === 'self' && this.dataForm.apiRequestType === 'pull') {
        this.requestFlag = '1'
      } else if (this.dataForm.apiConsumer === 'self' && this.dataForm.apiRequestType === 'push') {
        this.requestFlag = '1'
      } else if (this.dataForm.apiProvider === 'self' && this.dataForm.apiRequestType === 'push' && this.dataForm.apiDealType === 'SYNC') {
        this.requestFlag = '2'
      } else if (this.dataForm.apiConsumer === 'self' && this.dataForm.apiRequestType === 'pull' && this.dataForm.apiDealType === 'SYNC') {
        this.requestFlag = '2'
      } else if (this.dataForm.apiProvider === 'self' && this.dataForm.apiRequestType === 'push' && this.dataForm.apiDealType === 'ASYNC') {
        this.requestFlag = '3'
      } else if (this.dataForm.apiConsumer === 'self' && this.dataForm.apiRequestType === 'pull' && this.dataForm.apiDealType === 'ASYNC') {
        this.requestFlag = '3'
      }
    },
    // 关闭 tab
    closeTab () {
      content.methods.tabRemoveHandle(this.$route.name)
    },
    getChartData (apiCode) {
      this.$http.get(`/api/apiMonitor/getApiTotalByDays?days=7&apiCode=${apiCode}`).then(({ data: res }) => {
        if (res.code !== 0) {
          return false
        }
        this.linePlot.changeData(res.data)
      }).catch(() => { })
    },
    createChart () {
      this.linePlot = new Line('c1', {
        forceFit: true,
        legend: {
          visible: false
        },
        title: {
          visible: true,
          text: '最近七天接口请求数据分布'
        },
        xField: 'date',
        yField: 'value',
        seriesField: 'desc',
        color: ['#79e2f5', '#d43419']
      })
      this.linePlot.render()
    }
  }
}
</script>

<style lang="scss" scoped>
  .edp-home {
    &-card {
      &-header {
        &-title {
          font-size: 16px;
          float: left;
          color: #515a6e;
        }

        &-right {
          float: right;
        }
      }

      &-body {
        color: #515a6e;

        > span {
          font-size: 30px;
        }

        &-txt {
          height: 30px;
          padding-top: 8px;
        }
      }

      &-bottom {
        width: autopx;
        height: auto;
      }
    }

    &-module {
      color: #515a6e;

      &-ico {
        text-align: center;
        font-size: 32px;
        color: rgb(105, 192, 255);
      }

      &-name {
        text-align: center;
        padding-top: 20px;
      }
    }
  }

  ::v-deep .el-card__header {
    padding: 15px 10px;
  }

  ::v-deep .el-card__body {
    padding: 15px 10px;
  }

  ::v-deep .el-divider--horizontal {
    margin: 5px 0;
  }

  .api-body {
  }

  .api-body .left-text {
    padding-right: 10px;
    text-align: right;
    font-size: 12px;
  }

  .api-body .right-text {
    font-size: 14px;
    color: #59a2d5;
  }

  .api-title {
    border-radius: 4px;
    border: 1px solid #EBEEF5;
    background-color: #FFF;
    overflow: hidden;
    font-size: 24px;
    color: #303133;
    -webkit-transition: .3s;
    transition: .3s;
    padding: 10px 10px;
  }
</style>
